<template>
    <h1>for循环高级用法</h1>
    <!-- <input type="text" v-model="mytext" @input="handelInput"> -->
     <!-- 第三种方式-->
    <input type="text" v-model="mytext" >
    <ul>
        <!--没有key的话 会固定在当前dom坐标上，不会跟随数据变化而变化
            有key的话 会根据key值进行排序，然后渲染到对应的dom坐标上
        -->
        <li v-for="item in arrInput()" :key="item">
            <!--使用包含数组 去匹配输入的内容-->
            <!--第一种写法-->
            <!-- <div v-if="item.includes(mytext)">
                {{ item }}
            </div> -->
            {{ item }}
        </li>
    </ul>


</template>

<script setup>
import { ref } from 'vue';

const mytext = ref('')
const textarr = ref(['aaa', 'abc', 'aac', 'bbc', 'bbb', 'bdc', 'ccc', 'cbc', 'cac', 'cdd', 'acc'])
// const newarr = ref(['aaa', 'abc', 'aac', 'bbc', 'bbb', 'bdc', 'ccc', 'cbc', 'cac', 'cdd', 'acc'])

//采用过滤方式
// const handelInput = () => {

//     console.log(textarr.value.filter(item => item.includes(mytext.value)));
//     // textarr.value = textarr.value.filter(item => item.includes(mytext.value))
//     textarr.value = newarr.value.filter(item => item.includes(mytext.value))

// }
// 第三种方式
// 采用函数封装的模式
const arrInput = () => {
    return textarr.value.filter(item => item.includes(mytext.value))
}

</script>

<style lang="scss" scoped>

</style>